<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 编码 -->
    <meta charset="UTF-8">
    <!-- 关键词 -->
    <meta name="Keywords" content="canvas">
    <!-- 描述 -->
    <meta name="Description" content="文字矩阵">
    <title>文字矩阵</title>
    <style>
        *{
            margin: 0; /*外边距解决浏览器兼容问题*/
        }
        canvas{
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script>
        // 找到canvas画板
        var canvas = document.getElementById("canvas");
        // 获取权限
        var ctx = canvas.getContext("2d");
        // 获取屏幕分辨率
        var s = window.screen;
        var width = s.width;
        var height = s.height;
        // 设置画板的大小
        canvas.width = width;
        canvas.height = height;
        var fontSize = 18;
        // 计算横排文字个数
        var cols = Math.floor(width/fontSize);

        var blocks = [];
        blocks.push("")
        // 初始化y轴坐标
        for(var i = 0;i<cols;i++){
            blocks.push(0);
        }


        // 绘制文字
        function draw() {
            // 画布颜色
            ctx.fillStyle = "rgba(0,0,0,0.5)";
            // 清空画布
            ctx.fillRect(0,0,width,height);
            // 文字颜色
            ctx.fillStyle = "#ffff00";
            // 绘制文字  粗细 大小 样式
            ctx.font = "600 "+fontSize+"px 微软雅黑";

            for(var i = 0;i<cols;i++){
                var x = i*fontSize*5;
                var y = blocks[i]*fontSize;
                // 内容 坐标
                ctx.fillText("蓝",x,y);

                // 一轮之后回到0
                if(y > height){
                    blocks[i] = 0;
                }
                blocks[i]++;
            }

        }
        // 滚动
        setInterval(draw,3);
    </script>

</body>
</html>